"use client";

import React, { useState } from 'react';

export function ChatRoomTest() {
  const [isOpen, setIsOpen] = useState(false);

  console.log('[ChatRoomTest] Rendering, isOpen:', isOpen);

  if (!isOpen) {
    return (
      <div>
        <p style={{ color: 'white', position: 'fixed', top: '50px', left: '50px', zIndex: 1000 }}>
          ChatRoomTest: 关闭状态
        </p>
        <button
          onClick={() => setIsOpen(!isOpen)}
          style={{
            position: 'fixed',
            bottom: '20px',
            left: '20px',
            zIndex: 1000,
            backgroundColor: 'red',
            color: 'white',
            padding: '16px',
            borderRadius: '50%',
            border: 'none',
            cursor: 'pointer',
            fontSize: '16px'
          }}
          title="测试聊天按钮"
        >
          TEST
        </button>
      </div>
    );
  }

  return (
    <div
      style={{
        position: 'fixed',
        top: 0,
        left: 0,
        width: '300px',
        height: '100%',
        backgroundColor: 'black',
        color: 'white',
        zIndex: 1000,
        padding: '20px'
      }}
    >
      <h2>测试聊天室</h2>
      <button
        onClick={() => setIsOpen(!isOpen)}
        style={{
          backgroundColor: 'blue',
          color: 'white',
          padding: '8px 16px',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer'
        }}
      >
        关闭
      </button>
    </div>
  );
}
